import React from 'react';
import {Button, Modal, Table} from 'antd';
import {getDicList} from "../../services/dictionaryServer";

class DicListModalContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tableId: null,
      cname: null,
      bindDicId: null,
      visible: false,
      dataSource: []
    };
  }

  componentDidMount() {
    getDicList().then(function (json) {
      if (json) {
        this.setState({
          dataSource: json
        });
      }
    }.bind(this));
  }

  handleBindOk() {

    var bind = {
      columnName: this.state.cname,
      dicId: this.state.bindDicId,
      tableId: this.state.tableId
    }

    this.props.bindSignal.dispatch(bind);

    this.setState({
      tableId: null,
      cname: null,
      bindDicId: null,
      visible: false,
      clickIndex: -1,
    });
  }

  handleBindCancel() {
    this.setState({
      visible: false,
    });
  }

  onRowClick(e, index) {
    this.setState({
      bindDicId: e.id,
      clickIndex: index,
    });
  }

  getRowClassName(record, index) {
    if (index == this.state.clickIndex) {
      return 'row-click-highlight'
    }
  }
  render() {
    const {dataSource, visible} = this.state;

    const columns = [{
      title: '字典名称',
      key: 'name',
      dataIndex: 'name',
      width: '35%',
    }, {
      title: '字典说明',
      key: 'comment',
      dataIndex: 'comment',
    }];

    return (
      <Modal ref="dics"
             visible={visible}
             width="720"
             title="字典列表" onOk={this.handleBindOk.bind(this)} onCancel={this.handleBindCancel.bind(this)}
             footer={[
               <Button key="back" type="ghost" onClick={this.handleBindCancel.bind(this)}>返
                 回</Button>,
               <Button key="submit" type="primary"
                       onClick={this.handleBindOk.bind(this)}>
                 关 联
               </Button>,
             ]}
      >

        <Table bordered size="middle" columns={columns} pagination={{ pageSize: 20 }} scroll={{ y: 350 }}
               dataSource={dataSource} rowKey={record => record.id}
               rowClassName={this.getRowClassName.bind(this)}
               onRowClick={this.onRowClick.bind(this)}/>
      </Modal>
    );
  }
}

export default DicListModalContainer;
